// pages/songDetail/songDetail.js
import PubSub from 'pubsub-js'
import moment from 'moment'
import request from '../../../utils/request'
const appInstance = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,
    songDetail: {},
    audioId: '',
    audioUrl: '',
    currentTime: '00:00',
    durationTime: '00:00',
    width: 0, // 实时进度条的宽度
  },
  // 切换歌曲
  handleSwitch(event,switchType) {
    // 切歌类型
    let type = switchType || event.currentTarget.dataset.opt

    // 关闭当前音乐
    this.backgroundAudioManager.stop();

    // 发布消息
    PubSub.publish('selectSong', {
      type,
      audioId: this.data.songDetail.id
    })

    // 监听
    PubSub.subscribe('selectedSong', (msg, audioId) => {
      PubSub.unsubscribe('selectedSong') // 取消订阅

      // 获取音乐的详细信息
      this.setData({
        audioId,
        audioUrl: '' // 置空
      })
      this.getSongDetail(audioId)

      // 播放音乐
      this.musicControl(true, audioId)
    })
  },

  // 点击播放/暂停的回调
  handleMusciPlay() {
    let {
      isPlay
    } = this.data;
    this.setData({
      isPlay: !isPlay
    })
    this.musicControl(!isPlay);
  },
  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay) {

    if (isPlay) { // 播放
      // 获取音乐的播放连接
      let {
        audioUrl
      } = this.data;
      if (!audioUrl) {
        // 获取音乐播放链接
        audioUrl = await this.getAudioUrl()
      }
      this.backgroundAudioManager.src = audioUrl
      this.backgroundAudioManager.title = this.data.songDetail.name
      return;
    }
    // 暂停
    this.backgroundAudioManager.pause()
  },
  async getAudioUrl() {
    let {
      data
    } = await request('/song/url', {
      id: this.data.audioId
    })
    let audioUrl = data[0].url;
    this.setData({
      audioUrl
    })
    return audioUrl
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // options：用于接收路由跳转的query参数
    //原生小程序中路由传参，对参数的长度有限制，如果参数长度过长会自动截取掉
    let {
      id
    } = options
    this.setData({
      audioId: id
    })

    // 获取音乐详情信息
    this.getSongDetail(id)

    // 判断当前音乐是否播放

    if (appInstance.globalData.isMusicPlay &&
      appInstance.globalData.musicId === id
    ) {
      this.setData({
        isPlay: true
      })
    }

    this.backgroundAudioManager = wx.getBackgroundAudioManager()
    // 监听背景音乐暂停
    this.backgroundAudioManager.onPause(() => {
      this.updateIsPlay(false)
    })
    this.backgroundAudioManager.onStop(() => {
      this.updateIsPlay(false)
    })

    this.backgroundAudioManager.onPlay(() => {
      this.updateIsPlay(true)
      appInstance.globalData.musicId = id
    })
    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // console.log("总时长：", this.backgroundAudioManager.duration);
      // console.log("实时的时长：", this.backgroundAudioManager.currentTime);
      
      let {duration,currentTime} = this.backgroundAudioManager
     
      // 计算进度
      // let width = `${currentTime / duration * 100 }%` // 这么计算不够准确
      // 应该是 currentTime : duration = currentWidth : totalWidth
      let width = currentTime / duration *  450

       // 格式化实时的播放时长
       currentTime = moment(currentTime * 1000).format('mm:ss')

      this.setData({
        currentTime,width
      })
    })
    
    // 监听音乐播放结束
    this.backgroundAudioManager.onEnded(()=>{
      // 切换到下一首音乐
      this.handleSwitch(null,'next')

      // 进度条为0
      this.setData({
        width:0,
        currentTime: '00:00',
      })
    })
  },
  updateIsPlay(isPlay) {
    appInstance.globalData.isMusicPlay = isPlay
    this.setData({
      isPlay
    })
  },
  async getSongDetail(id) {

    let {
      songs
    } = await request('/song/detail', {
      ids: id
    });

    let durationTime = moment(songs[0].dt).format('mm:ss')
    this.setData({
      songDetail: songs[0],
      durationTime
    })

    wx.setNavigationBarTitle({
      title: this.data.songDetail.name
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})